<html>

<head>
    <title>需求响应</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">


    <style>
        .page-head {
            background: transparent;
        }

        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }

        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD ;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }

        .panel-f p{
            margin-bottom: 0px;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }
    </style>

</head>

<body>
    <div class="page" id="page-vue">

        <div class="page-title">需求响应</div>
        <div class="page-main">
            <el-row>
                <el-col :span="4">
                    <dev-tree v-on:click-node="aa" v-bind:ischeckbox="true"></dev-tree>
                </el-col>
                <el-col :span="20">
                    <div class="page-head">
                        <el-form :inline="true" style="margin-bottom: 0px;">
                            <el-form-item label="响应方案">
                                <el-select placeholder="" v-model="schemeId" style="width: 150px;">
                                    <el-option value="" label="请选择方案"></el-option>
                                    <el-option value="1" label="方案一"></el-option>
                                    <el-option value="2" label="方案二"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>

                            <el-form-item style="float: right;">
                                <el-button type="primary" @click="onAdd">新增方案</el-button>
                                <el-button type="primary" @click="onRemove">删除方案</el-button>
                            </el-form-item>
                        </el-form>


                    </div>

                    <div class="panel">
                        <div class="panel-title">
                            <small> 可中断负荷（‹------通过左侧拓扑树 选择能管对象或采集点）</small>
                        </div>
                        <el-tag v-for="tag in tags" :key="tag.name" closable @close="onTagClose(tag)">
                            {{tag.name}}
                        </el-tag>

                        <p style="text-align: right;"><el-button size="small" type="primary" @click="search">保存方案</el-button></p>
                    </div>

                    <div class="panel" style="height: 40px;">
                        <el-form :inline="true" style="margin-bottom: 0px;">
                            <el-form-item label="选择模拟需求响应时间段">
                                <el-date-picker type="date" v-model="beginTime" placeholder="起始" style="width: 150px;"></el-date-picker>
                                -
                                <el-date-picker type="date" v-model="endTime" placeholder="截止" style="width: 150px;"></el-date-picker>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="danger" @click="search">响应效果预览</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="chart-title">效果预览</div>
                    <div class="chart-outer">

                    </div>

                    <el-row>
                        <el-col :span="5">
                            <div class="panel panel-f">
                                <p>基线负荷（修正前）</p>
                                <h5>18.6 kW</h5>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="panel panel-f">
                                <p>基线负荷（修正前）</p>
                                <h5>18.6 kW</h5>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="panel panel-f">
                                <p>基线负荷（修正前）</p>
                                <h5>18.6 kW</h5>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="panel panel-f">
                                <p>基线负荷（修正前）</p>
                                <h5>18.6 kW</h5>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="panel panel-f">
                                <p>基线负荷（修正前）</p>
                                <h5>18.6 kW</h5>
                            </div>
                        </el-col>
                    </el-row>




                </el-col>
            </el-row>

        </div>


        <!--编辑弹窗-->
        <el-dialog title="编辑方案" :visible.sync="editSchemeVisible" width="400">
            <el-card>
                <el-form label-width="100px">
                    <el-form-item label="方案名称">
                        <el-input></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small" round>保存</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-dialog>


    </div>


    <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


    <script>

        var vuePage = new Vue({
            el: '#page-vue',
            data: {
                schemeId: '',
                editSchemeVisible: false,
                tags: []
            },
            methods: {
                search: function () {

                },

                aa(data) { },

                onRemove() {
                    this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                    });
                },


                onTabClick(tab, event) {

                },
                onTagClose(tag) {
                    this.tags.splice(this.tags.indexOf(tag), 1);
                },
                onAdd(){
                    this.editSchemeVisible=true;
                }
            },
            created: function () {

                this.beginTime = TimeUtil.convertToString(new Date()).substr(0, 10);
                this.endTime = this.beginTime;

                this.tags = [{ name: "aaa" }, { name: "bbb" }];

            },
            mounted: function () {

            }
        });


    </script>
</body>

</html>
